<template>
    <div>
        <van-nav-bar title="登入页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <van-cell-group inset class="pass">
                <van-field v-model="username" name="username" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" name="password" type="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>

            <van-popup v-model:show="show1" :style="{ padding: '64px' }">用户名不存在</van-popup>
            <van-popup v-model:show="show2" :style="{ padding: '64px' }">密码错误</van-popup>
            <van-button round block class="btn" type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)"
                native-type="submit">登入</van-button>

        </van-form>
    </div>
    <div class="sign">
        <RouterLink to="/sign">注册</RouterLink>
    </div>

    <van-tabbar v-model="active">
    <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item name="category" icon="search" to="/category">分类</van-tabbar-item>
    <van-tabbar-item name="car" icon="shopping-cart" to="/car">购物车</van-tabbar-item>
    <van-tabbar-item name="login" icon="manager" to="/login">个人中心</van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { login } from '../api/user'

const active=ref('login')
const username = ref('');
const password = ref('');
const show1 = ref(false);
const show2 = ref(false);

const router = useRouter();

const onClickLeft = () => history.back();
const onSubmit = (values: { username: string, password: string }) => {

    console.log(values);

    login(values.username, values.password).then(result => {
        if (result.code == '200') {
            console.log(result)
            // 保存用户名
            localStorage.setItem('name', values.username)
            //保存用户id
            localStorage.setItem('id', result.data.userid)
            // 保存token
            localStorage.setItem('token', result.data.token)
            router.push({ name: 'home' })
        } else if (result.code == '10010') {
            show1.value = true;
        } else if (result.code == '10011') {
            show2.value = true;
        }

    })



};



</script>
<style scoped>
.sign {
    font-size: 10px;
    text-align: center;
    margin: 2rem 1rem;
}

.btn {
    margin: auto;
    height: 25px;
    margin-top: 5px;
    width: 8rem;
}
</style>